<template>
	<div class="archives_videoinfo_info">
		<div>
			<Table
				:tableData="tableData"
				:tableHead="tableHead"
				:isUseSlot="false"
				:page="listQuery.page"
				:limit="listQuery.limit"
				v-loading="listLoading"
			>
				<template slot="tool" slot-scope="{ data }">
					<el-button
						style="padding:3px;"
						icon="el-icon-document"
						@click="handleEdit(data.row)"
						type="text"
						>编辑</el-button
					>
					<el-button
						style="color:red;padding:3px;"
						icon="el-icon-delete"
						type="text"
						@click="delet(data.row)"
						>删除</el-button
					>
				</template>
			</Table>
			<Pagination
				v-show="total > 0"
				:total="total"
				:page.sync="listQuery.page"
				:limit.sync="listQuery.limit"
				@pagination="getList"
			></Pagination>
		</div>
		<form-tem
			:info="{ title: '视频信息', width: '70%', top: '5%' }"
			:formList="formList"
			@submit="submit"
			ref="formDelg"
			@onClose="closeDialog"
		>
		</form-tem>
	</div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import formTem from "@/template/form.temp";
import Table from "@/components/Table";
import { cloneDeep } from "lodash";
import {
	getVideoList,
	insertVideoInfo,
	updateVideoInfo,
	updateGetVideoInfo,
} from "@/api/RCIM/RCIM-archives";
import { DeleteVideo } from "@/api/RCIM/RCIM-delet";
import control from "../mixins/control";
export default {
	components: {
		Table,
		Pagination,
		formTem
	},
	mixins: [control],
	name: "archives_videoinfo_info",
	data() {
		return {
			tableData: [],
			tableHead: [
				{
					prop: "port",
					label: "端口",
					align: "left"
				},
				{
					prop: "IP",
					label: "IP",
					align: "left"
				},
				{
					prop: "wayNum",
					label: "路数",
					align: "left"
				},
				{
					prop: "name",
					label: "名称",
					align: "left"
				},
				{
					prop: "operate",
					label: "操作",
					align: "center"
				}
			],
			total: 1,
			listQuery: {
				page: 1,
				limit: 10
			},
			listLoading: false,
			dialogFormVisible: false,
			formListData: [
				{
					list: [
						{
							type: "input",
							label: "账号",
							width: "33%",
							labelWidth: "100px",
							placeholder: "",
							moduleKey: "account"
						},
						{
							type: "input",
							label: "密码",
							width: "33%",
							labelWidth: "200px",
							placeholder: "",
							moduleKey: "password"
						},
						{
							type: "input",
							label: "端口",
							width: "33.9%",
							labelWidth: "200px",
							placeholder: "",
							moduleKey: "port"
						},
						{
							type: "input",
							label: "IP",
							width: "33%",
							labelWidth: "100px",
							placeholder: "",
							moduleKey: "IP"
						},
						{
							type: "input",
							label: "路数",
							width: "33%",
							labelWidth: "200px",
							placeholder: "",
							moduleKey: "wayNum"
						}
					]
				},
				{
					list: [
						{
							type: "input",
							label: "名称",
							width: "33%",
							labelWidth: "100px",
							placeholder: "",
							moduleKey: "name_0"
						},
						{
							type: "input",
							label: "地址",
							width: "66.9%",
							labelWidth: "200px",
							placeholder: "",
							moduleKey: "address_0",
							after: {
								width: "40%",
								content: this.renderBtn3
							}
						}
					],
					title: "访问路径"
				}
			],
			formList: [],
			search: "",
			formIndex: 0
		};
	},
	mounted() {
		this.listQuery.id = this.entData.id;
		const newForm = cloneDeep(this.formListData);
		this.formList = newForm;
		this.getList()
	},
	methods: {
		/**
		 * @desc 删除数据
		 * @param {Object} row 表格行数据
		 */
		delet(row) {
			this.$confirm("确认要删除吗？")
				.then(_ => {
					DeleteVideo(row.id).then(res => {
						if (res.code === 200) {
							this.getList();
							return this.$message({
								type: "success",
								message: "删除成功"
							});
						}
						return this.$message({
							type: "error",
							message: "删除失败"
						});
					});
				})
				.catch(_ => {});
		},
		/**
		 * @desc 获取数据
		 */
		async getList() {
			this.listLoading = true;
			const { data } = await getVideoList(this.listQuery);
			this.total = data.total;
			this.tableData = data.videoList;
			this.listLoading = false;
		},
		/**
		 * @desc 编辑查看表格数据
		 * @param {Object} row 表格行数据
		 */
		handleEdit(data) {
			this.$refs.formDelg.openDialog();
			this.id = data.id;
			updateGetVideoInfo({id:this.id}).then(res => {
				// this.handleInfo(res.data);
				let values = [{}, {}];
				let data = res.data.data
				this.formList[1].list.length = 2;
				this.formIndex = 0;
				if (data.conditionListName && data.conditionListAddress) {
					const adresss = data.conditionListAddress.split(",")
					const conditionList = data.conditionListName.split(",").map((item,index) => {
						return {
							["name_" + index] : item,
							["address_" + index]: adresss[index],
						}
					})
					for (
						let index = 0;
						index < conditionList.length;
						index++
					) {
						let v = conditionList[index];
						if (index > 0) {
							this.append();
						}
						for (let key in v) {
							let newKey = key;
							data[newKey] = v[key];
							values[1][newKey] = v[key];
						}
					}
				}

				const firstKeys = [
					"IP",
					"account",
					"password",
					"port",
					"wayNum"
				]
				firstKeys.forEach(itemKey => {
					values[0][itemKey] = data[itemKey]
				})
				this.$refs.formDelg.getFormEle().forEach((item, ide) => {
					item[0].setDefaultValue(values[ide]);
					// ()
					setTimeout(item[0].clearValedate ? item[0].clearValedate : () => {}, 100)
				});
			});
		},
		/**
		 * @desc 关闭弹窗回调
		 */
		closeDialog() {
			this.id = "";
			const data = this.$refs.formDelg.getFormEle()[1][0].getFormData();
			const needDels = [];
			const defaultCalue = {
				name_0: "",
				address_0: "",
			}
			Object.keys(data).forEach(item => {
				if(item.split("_")[1] > 0){
					needDels.push(item)
				}
			})
			this.$refs.formDelg.getFormEle()[1][0].setDefaultValue(defaultCalue)
			this.$refs.formDelg.getFormEle()[1][0].deleteKeys(needDels)

			const newForm = cloneDeep(this.formListData);
			this.formList = newForm;
		},
		/**
		 * @desc 新增、编辑数据
		 * @param {Object} formData 表单数据
		 */
		async submit(val) {
			console.log(val);
			val.entid = this.entData.id;
			let conditionListName = "",
				conditionListAddress = "";
			// debugger
			val.conditionList.forEach((v, i) => {
				conditionListName +=
					v.name + (i === val.conditionList.length - 1 ? "" : ",");
				conditionListAddress +=
					v.address + (i === val.conditionList.length - 1 ? "" : ",");
			});
			delete val.conditionList;

			if (this.id) {
				await updateVideoInfo({
					id: this.id,
					...val,
					conditionListName,
					conditionListAddress
				}).then((res) => {
					if(res.code === 200){
						this.$refs.formDelg.closeDialog()
						this.$message.success('编辑成功')
						this.getList()
					} else {
						this.$message.error('编辑失败：' + res.msg)
					}
				}).catch(e => {
					this.$message.error('编辑失败：' + e)
				});
			} else {
				await insertVideoInfo({
					...val,
					conditionListName,
					conditionListAddress
				}).then((res) => {
					if(res.code === 200){
						this.$refs.formDelg.closeDialog()
						this.$message.success('添加成功')
						this.getList()
					} else {
						this.$message.error('添加失败：' + res.msg)
					}
				}).catch(e => {
					this.$message.error('添加失败：' + e)
				});
			}
		},
		/**
		 * @desc 渲染表单新增行
		 * @param {Object} h 
		 * @param {Object} content 
		 */
		renderBtn(h) {
			return <div class="btn_wrap" style="margin-left: 10px;" />;
		},
		/**
		 * @desc 渲染表单新增行
		 * @param {Object} h 
		 * @param {Object} content 
		 */
		renderBtn1(h, content) {
			return (
				<div class="btn_wrap" style="margin-left: 10px;">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-plus"
						on-click={() => this.append()}
					>
						添加
					</el-button>
					<el-button
						size="mini"
						type="text"
						style="color:red"
						icon="el-icon-delete"
						on-click={() => this.remove(content)}
					>
						删除
					</el-button>
				</div>
			);
		},
		/**
		 * @desc 渲染表单新增行
		 * @param {Object} h 
		 * @param {Object} content 
		 */
		renderBtn2(h, content) {
			return (
				<div class="btn_wrap" style="margin-left: 10px;">
					<el-button
						size="mini"
						type="text"
						style="color:red"
						icon="el-icon-delete"
						on-click={() => this.remove(content)}
					>
						删除
					</el-button>
				</div>
			);
		},
		/**
		 * @desc 渲染表单新增行
		 * @param {Object} h 
		 * @param {Object} content 
		 */
		renderBtn3(h) {
			return (
				<div class="btn_wrap" style="margin-left: 10px;">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-plus"
						on-click={() => this.append()}
					>
						添加
					</el-button>
				</div>
			);
		},
		/**
		 * @desc 新增表单行
		 */
		appendContent() {
			this.formIndex++;
			return [
				{
					type: "input",
					label: "名称",
					width: "33%",
					labelWidth: "100px",
					placeholder: "",
					moduleKey: "name_" + this.formIndex
				},
				{
					type: "input",
					label: "地址",
					width: "67%",
					labelWidth: "200px",
					placeholder: "",
					moduleKey: "address_" + this.formIndex,
					after: {
						width: "40%",
						content: this.renderBtn1
					}
				}
			];
		},
		/**
		 * @desc 新增表单行
		 */
		append() {
			const last = this.formList[1].list.length - 1;
			if (last === 1) {
				this.formList[1].list[last].after.content = this.renderBtn;
			} else {
				this.formList[1].list[last].after.content = this.renderBtn2;
			}

			this.formList[1].list.push(...this.appendContent());
		},
		/**
		 * @desc 删除表单行
		 */
		remove(c) {
			const forAll = cloneDeep(this.formList);
			const newList = forAll[1].list.filter(
				v => v.moduleKey.split("_")[1] != c.moduleKey.split("_")[1]
			);
			const deleNum = c.moduleKey.split("_")[1];
			const deleKeys = [
				"name_" + c.moduleKey.split("_")[1],
				"address_" + c.moduleKey.split("_")[1]
			]
			this.$refs.formDelg.getFormEle()[1][0].deleteKeys(deleKeys)
			const last = newList.length - 1;
			if (last === 1) {
				newList[last].after.content = this.renderBtn3;
			} else {
				newList[last].after.content = this.renderBtn1;
			}
			this.formList[1].list = newList;
		},
		handleInfo(infoObject) {
			// 处理获取实例信息，与formList的数据的匹配
			if (!infoObject || typeof infoObject != "object") return;
			for (let key in infoObject) {
				this.formList.forEach(item => {
					if (key === item.moduleKey) {
						item[key] = infoObject[key];
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.archives_videoinfo_info {
}
</style>
